<template>
  <div style="overflow: hidden">
    <el-menu :default-active="this.$route.path" class="el-menu-demo" mode="horizontal" @select="handleSelect"
      active-text-color="#000" :router="true" style="">
      <el-menu-item index="/BuyParkingSpace" style="width: 20%; text-align: center; font-size: 16px">选购车位</el-menu-item>
      <el-menu-item index="/AlreadyParkingSpace" style="width: 20%; text-align: center; font-size: 16px">已有车位
      </el-menu-item>
      <el-menu-item index="/OrderInformation" style="width: 20%; text-align: center; font-size: 16px">订单信息
      </el-menu-item>
      <el-menu-item index="/Coupons" style="width: 15%; text-align: center; font-size: 16px">优惠券</el-menu-item>
      <el-dropdown class="avatar-container" trigger="click">
        <div class="avatar-wrapper">
          <img src="../assets/user.jpg" class="user-avatar" />
          <i class="el-icon-caret-bottom" />
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="lookdata">查看资料</el-dropdown-item>
          <el-dropdown-item @click.native="handleUpdate">修改资料</el-dropdown-item>
          <el-dropdown-item divided @click.native="logout">
            <span style="display: block; text-align: center; font-size: 14px">退出</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-menu>

    <el-dialog :destroy-on-close="true" title="基本资料" :visible.sync="dialogVisibleUp" width="25%">
      <div class="user">
        <img src="../assets/user.jpg" class="user-avatar" />
      </div>
      <el-form label-position="right" label-width="120px">
        <el-form-item label="用户名:">
          {{ userData.uname }}
        </el-form-item>
        <el-form-item label="身份证:">
          {{ userData.identity }}
        </el-form-item>
        <el-form-item label="联系电话:">
          {{ userData.tel }}
        </el-form-item>

      </el-form>
    </el-dialog>
    <el-dialog title="修改用户" :visible.sync="editVisible" width="40%">
      <span>
        <el-form ref="registerForm" :model="userData" label-width="110px">
          <el-form-item label="用户身份证号">
            <el-input v-model="userData.identity"></el-input>
          </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="userData.uname"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="userData.password"></el-input>
          </el-form-item>
          <el-form-item label="电话号码">
            <el-input v-model="userData.tel"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false" style="font-weight: bold">取 消</el-button>
        <el-button type="primary" style="font-weight: bold" @click="handleEdit">更新</el-button>
      </span>
    </el-dialog>
    <transition name="el-fade-in-linear" mode="out-in" :appear="true">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisibleUp: false,
      userData: {},
      adlist: {
        title: '',
        image: '',
      },
      adClose: false,
      editVisible: false,
    };
  },
  created() {
    if (sessionStorage.getItem("loginkey") == 0) {
      this.$message({
        showClose: true,
        message: "系统异常！",
        type: "error",
      });
      setTimeout(() => {
        this.$router.push(`/login`);
      }, 200);
    }
  },
  mounted() {
    this.userData = JSON.parse(sessionStorage.getItem("userinfo"))
  },
  methods: {
    handleSelect() {
    },

    logout() {
      sessionStorage.setItem("loginkey", 0);
      this.$router.push(`/login`);
    },
    lookdata() {
      this.dialogVisibleUp = true;
    },
    // 更新
    handleUpdate() {
      this.$http(this.baseURL + "/user/findById?id=" + this.userData.uid).then(res => {
        if (!res.data.flag) {
          this.$message.error(res.data.message)
        } else {
          this.$message.success(res.data.message)
          this.userData = res.data.data;
          this.editVisible = true;
        }
      })
    },
    handleEdit() {
      this.$http.post(this.baseURL + "/user/update", this.userData).then(res => {
        if (!res.data.flag) {
          this.$message.error(res.data.message);
        } else {
          this.$message.success(res.data.message);
          this.editVisible = false;
          this.logout()
        }
      })
    },
  },
};
</script>

<style lang="less" scope>
.ad {
  position: fixed;
  right: 15px;
  bottom: 10px;
  z-index: 999;

  .close {
    font-size: 24px;
    font-weight: 700;
    border: 1px solid #000;
    text-align: center;
    width: 24px;
    line-height: 24px;
    cursor: pointer;
    margin-bottom: 5px;
  }

  .con {
    height: 180px;
    cursor: pointer;

    .adlogo {
      position: absolute;
      top: 10px;
      right: 5px;
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      font-size: 10px;
      padding: 1px;
    }

    img {
      height: 100%;
    }

    .title {
      position: absolute;
      width: 100%;
      // top: 0;
      left: 0;
      bottom: 0;
      color: #fff;
      background: rgba(27, 36, 28, 0.7);
      text-align: center;
      line-height: 25px;
      font-size: 14px;
    }
  }
}

.el-menu-demo {
  font-weight: 700;
  box-shadow: 10px 10px 30px #c4c4c4;
  border-radius: 10px;
  margin: 15px 15px 20px 15px;
  padding: 0 25px 0 10px;
}

.avatar-container {
  float: right;
  // position: absolute;
  // right: 3.5%;
  // top: 1.5%;

  .avatar-wrapper {
    margin-top: 5px;

    .user-avatar {
      cursor: pointer;
      width: 50px;
      height: 50px;
      border-radius: 15px;
      box-shadow: 1px 1px 8px 0px;
    }

    .el-icon-caret-bottom {
      cursor: pointer;
      position: absolute;
      top: 25px;
      font-size: 14px;
    }
  }
}

.el-dialog {
  border-radius: 8px;
  font-weight: 700;
  margin-top: 10vh !important;

  .el-dialog__body {
    .el-form-item {
      margin-bottom: 10px !important;

      .el-form-item__label {
        font-size: 16px;
      }

      .el-form-item__content {
        font-size: 16px;
        text-align: center;
        font-size: 16px;
      }
    }
  }
}

.user {
  width: 100px;
  height: 100px;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-bottom: 10px;

  .user-avatar {
    width: 100px;
    height: 100px;
    border-radius: 15px;
    box-shadow: 1px 1px 8px 0px;
  }
}

.el-dropdown-menu__item {
  line-height: 25px;
}

.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: #fff;
  color: #000;
}
</style>
